<template>
  <div class="tip">
    <p>{{text}}</p>
    <button class="config" @click="YES" @mouseenter="cantForChange" @mouseleave="rePlay">
      <transition name="fadeIn">
        <span v-if="cantChange">确认</span><span v-if="!cantChange">(谨慎)</span>
      </transition>
    </button>
    <button class="cancel" @click="NO">取消</button>
  </div>
</template>

<script>
export default {
  props: ["text"],
  data() {
    return {
      cantChange:true
    }
  },
  methods: {
    cantForChange(){
      this.cantChange=false
    },
    rePlay(){
      this.cantChange=true
      
    },
    YES() {
      this.$emit("config");
    },
    NO() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="less" scoped>
.tip {
  position: absolute;
  left: 0;
  top: -230px;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 400px;
  height: 250px;
  background-color: rgba(255, 255, 255);
  text-align: center;
  border-radius: 15px;
  z-index: 99999;
  p {
    margin-top: 80px;
    font-size: 20px;
    color: #F56C6C;
  }
  .config {
    background-color:#F56C6C;
    color: #ffffff77;
    font-weight: 400;
    transition: all .2s;
    &:hover{
      // background-color: lighten(#ea3323,10%);
      box-shadow: 0 0 5px 0 #F56C6C;
    }
  }
  .cancel {
    background-color: #67C23A;
    font-weight: 400;
    transition: all .3s;
    &:hover{
      // background-color:lighten(springgreen,20%);
      box-shadow: 0 0 5px 0 #67C23A;
    }
  }
  button {
    width: 25%;
    outline: none;
    height: 35px;
    border: none;
    border-radius: 5px;
    margin: 25px 30px;
    
  }
}
</style>